<template>
  <div>
    <h1>mapState</h1>
    <h2>{{ this.$store.state.myData }}</h2>
    <h2>{{ myData }}</h2>
    <h2>{{ showLocalState }}</h2>
    <h2>{{ showArr }}</h2>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data() {
    return {
      localCount: 1
    }
  },
  /* computed: mapState([
  // 映射 this.count 为 store.state.count
    'myData',
    'arr'
  ]) */
  computed: mapState({
    myData: 'myData',
    // 为了能够使用 `this` 获取局部状态，必须使用常规函数
    showLocalState(state) {
      return state.myData + this.localCount
    },
    showArr: (state) => {
      return state.arr
    }
  }),
  mounted() {
    console.log(this.myData)
  }
}
</script>

<style lang="scss" scoped>

</style>
